<%@ page import="com.LGF.Book.bean.Record" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/4/4
  Time: 13:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>图书在线借阅系统</title>
    <link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="lib/layui/css/book.css">
    <script type="text/javascript" src="lib/layui/layui.js"></script>
    <script type="text/javascript" src="lib/js/jquery-3.4.1.js"></script>
    <style>
        .layui-layout-body {
            background: url("lib/Images/bg-4.jpg") no-repeat;
            background-size: cover;
        }
        .layui-elem-field {
            font-weight: bolder;
        }

    </style>

</head>
<body class="layui-layout-body">
<div class="layui-container-box" style="width:90%;background: url(lib/Images/bg.jpg )">
    <fieldset class="layui-elem-field layui-field-title" >
        <legend>图书归还</legend>
    </fieldset>

    <div class="demoTable" style="margin-bottom: 10px;">
            <label style="margin-left: 10px; font-size: 14px;">会员卡号:</label>
            <div class="layui-input-inline">
                <input class="layui-input" id="memId" name="id"  autocomplete="off" style="width: 100px;" />
            </div>
            <button class="layui-btn" id="searchBtn">搜索</button> <button class="layui-btn" id="ReturnBtn" style="margin-left: 20px;">批量归还</button>



<%--        <c:if test="${mem!=null}">--%>
<%--            <label style="margin-left: 10px; font-size: 14px;">会员卡号:</label>--%>
<%--            <div class="layui-input-inline">--%>
<%--                <input class="layui-input" id="memId" name="id"  autocomplete="off" style="width: 100px;" />--%>
<%--            </div>--%>
<%--            <button class="layui-btn" id="searchBtn">搜索</button> <button class="layui-btn" id="ReturnBtn" style="margin-left: 20px;">批量归还</button>--%>

<%--            <label style="margin-left: 10px; font-size: 14px;">会员名称:</label>--%>
<%--            <div class="layui-input-inline" >--%>
<%--                <input class="layui-input" value="${mem.mname}" name="mname"  autocomplete="off" style="width: 100px;" disabled />--%>
<%--            </div>--%>
<%--            <label style="margin-left: 10px; font-size: 14px;">会员类型:</label>--%>
<%--            <div class="layui-input-inline" >--%>
<%--                <input class="layui-input" name="mtname" value="${mem.type.mtname}"  autocomplete="off" style="width: 100px;" disabled/>--%>
<%--            </div>--%>
<%--            <label style="margin-left: 10px; font-size: 14px;">已借数量:</label>--%>
<%--            <div class="layui-input-inline" >--%>
<%--                <%--%>
<%--                    List<Record> re = (List<Record>) request.getAttribute("records");--%>
<%--                %>--%>
<%--                <input class="layui-input" name="amount" value="<%=re.size()%>"  autocomplete="off" style="width: 100px;" disabled/>--%>
<%--            </div>--%>
<%--            <label style="margin-left: 10px; font-size: 14px;">账户余额:</label>--%>
<%--            <div class="layui-input-inline" >--%>
<%--                <input class="layui-input" value="${mem.balance}" name="balance"  autocomplete="off" style="width: 100px;" disabled/>--%>
<%--            </div>--%>
<%--        </c:if>--%>

    </div>

    <label style="margin-left: 10px; font-size: 14px;">会员名称:</label>
    <div class="layui-input-inline" >
        <input class="layui-input" id="mname" value="" name="mname"  autocomplete="off" style="width: 100px;" disabled />
    </div>
    <label style="margin-left: 10px; font-size: 14px;">会员类型:</label>
    <div class="layui-input-inline" >
        <input class="layui-input" id="mtname" name="mtname" value=""  autocomplete="off" style="width: 100px;" disabled/>
    </div>
    <label style="margin-left: 10px; font-size: 14px;">已借数量:</label>
    <div class="layui-input-inline" >

        <input class="layui-input" id="amount" name="amount" value=""  autocomplete="off" style="width: 100px;" disabled/>
    </div>
    <label style="margin-left: 10px; font-size: 14px;">账户余额:</label>
    <div class="layui-input-inline" >
        <input class="layui-input" id="balance"  value="" name="balance"  autocomplete="off" style="width: 100px;" disabled/>
    </div>
    <label style="margin-left: 10px; font-size: 14px;">可借天数:</label>
    <div class="layui-input-inline" >
        <input class="layui-input" id="keepDay"  value="" name="keepDay"  autocomplete="off" style="width: 100px;" disabled/>
    </div>




    <table class="layui-hide" id="book-list" lay-filter="book-list" ></table>

    <script type="text/html" id="barDemo">
        {{#  if(new Date(d.rentDate) < new Date()&&d.backDate==null){ }}
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="return">续借</a>
        {{#  } }}
    </script>
    <script type="text/html" id="checkbd">
        {{#  if (new Date(d.rentDate) < new Date()&&d.backDate==null){ }}
        <input type="checkbox" name="siam_one" title="" lay-skin="primary" data-id = "{{ d.id }}">
        {{#  } }}
    </script>
    <style>
        .laytable-cell-checkbox .layui-disabled.layui-form-checked i {
            background: #fff !important;
        }
    </style>

</div>
</body>
</html>
<script type="text/javascript">

    /**
     * 获取归还时间
     * count:借阅时间
     * @param count
     * 1d = 24h 1h = 60m 1m = 60s 1s = 1000ms
     * 把时间转化为毫秒数
     */
    function  getBackDate(count){
        //1.获取系统的当前时间
        var dateObj = new Date();
        //2.转成毫秒数
        var mills = dateObj.getMilliseconds();

        mills += count*24*60*60*1000;
        //3.转成日期
        dateObj.setMilliseconds(mills);

        //4.时间转成字符串类型
        var year = dateObj.getFullYear();
        var month = dateObj.getMonth()+1; //0~11
        var date = dateObj.getDate();
        var dateStr =year+"-"+(month>=10?month:"0"+month)+"-"+(date>=10?date:"0"+date);
        return dateStr;


    }

    // 进行日期的相差时间几天
    function getDateDiff(date1,date2){
        var sArr = date1.split("-");
        var eArr = date2.split("-");
        var sRDate = new Date(sArr[0], sArr[1], sArr[2]);
        var eRDate = new Date(eArr[0], eArr[1], eArr[2]);
        var result = (eRDate-sRDate)/(24*60*60*1000);
        return result ;
    }


    // //记录选中的数据:做缓存使用,作为参数传递给后台,然后生成pdf ,压缩
    // var ids =new Array();
    // //当前表格中的全部数据:在表格的checkbox全选的时候没有得到数据, 因此用全局存放变量
    // var table_data=new Array();
    layui.use(['dropdown', 'util','form', 'layer', 'table'],function () {
        var dropdown = layui.dropdown
            ,util = layui.util
            ,layer = layui.layer
            ,table = layui.table
            ,$ = layui.jquery
            ,form =layui.form;

        // /**
        //  * 开启复选框
        //  */
        // table.on('checkbox(book-list)', function(obj){
        //
        //     if(obj.checked==true){
        //
        //         if(obj.type=='one'){
        //
        //             ids.push(obj.data.id);
        //
        //         }else{
        //
        //             for(var i=0;i<table_data.length;i++){
        //
        //                 ids.push(table_data[i].id);
        //
        //             }
        //
        //         }
        //
        //     }else{
        //
        //         if(obj.type=='one'){
        //
        //             for(var i=0;i<ids.length;i++){
        //
        //                 if(ids[i]==obj.data.id){
        //
        //                     // ids.remove(i);用这个方法会报错not a function
        //
        //                     ids.pop();
        //
        //                     ids.splice(i,1);
        //
        //                 }
        //
        //             }
        //
        //         }else{
        //
        //             for(var i=0;i<ids.length;i++){
        //
        //                 for(var j=0;j<table_data.length;j++){
        //
        //                     if(ids[i]==table_data[j].id){
        //
        //                         // ids.remove(i);
        //
        //                         ids.pop();
        //
        //                         ids.splice(i,1);
        //
        //                     }
        //
        //                 }
        //
        //             }
        //
        //         }
        //
        //     }
        // });


        $(function () {
            $("#ReturnBtn").addClass("layui-btn-disabled").attr("disabled",true);
            var memId=0;
            $("#searchBtn").click(function () {

              //  $("#ReturnBtn").addClass("layui-btn-disabled").attr("disabled",true);
                //拿到id
                 memId = $("#memId").val();
                console.log(memId);
                //创建record空对象
                var d = null;
                //判断memberId是否存在
                if (!$("#memId").val()){
                    alert("请输入会员信息");
                    return;
                }
                //数据接口
                var url="record.let?type=queryback&memId="+memId;
                // //发送请求
                // location.href="record.let?type=queryback&memId="+memId;
                $.get(url,function (data){
                    //调用get方法成功后 回调data数据
                    //json字符串
                    console.log(data);
                    if (data=="false"){
                        alert("输入会员卡号有误！");
                        window.location.href="book_return.jsp";
                    }
                    //把json字符串，转成json对象
                    d =JSON.parse(data);

                    $("#mname").val(d.mname);
                    $("#mtname").val(d.type.mtname);
                    $("#amount").val(d.type.amount);
                    $("#balance").val(d.balance);
                    $("#keepDay").val(d.type.keepDay);
                });

                //查询功能关闭
                $(this).addClass("layui-btn-disabled").attr("disabled",true);

                //开启批量归还功能
                $("#ReturnBtn").removeClass("layui-btn-disabled").attr("disabled",false);


                //根据会员号查询借阅信息功能
                table.render({
                    elem:'#book-list',
                    url:'record.let?type=query&memId='+memId,//数据接口
                    title:'图书信息表',
                    page:true,//开启分页
                    method:'post',
                    limit:5,
                    limits:[3,5],
                    request: {
                        page: 1 //页码的参数名称，默认：page
                        ,limit: 5//每页数据量的参数名，默认：limit
                    } ,
                    cols:[[//表头
                        { templet: "#checkbd",
                            title: "<input type='checkbox' name='siam_all' title='' lay-skin='primary' lay-filter='siam_all'> ",width: 50},
                        {field:'id',title:'ID',sort:true,width:70},
                        {field:'bookId',title:'书名',templet:'<div>{{d.book.bname}}</div>'},
                        {field:'bookCase',title:'类别',templet:'<div>{{d.book.type.tname}}</div>',width: 60},
                        {field:'author',title:'作者',templet:'<div>{{d.book.author}}</div>'},
                        {field:'stock',title:'库存',templet:'<div>{{d.book.stock}}</div>',width:60},
                        {field:'price',title:'价格',templet:'<div>{{d.book.price}}</div>',width:60},
                        {field:'rentDate',title:'借阅时间',templet : '<div>{{Format(d.rentDate,"yyyy-MM-dd") }}</div>'},
                        {field:'backDate',title:'归还时间',templet : function (d) {
                                if (d.backDate==null){
                                    return "未归还";
                                }

                                return Format(d.backDate,"yyyy-MM-dd");
                            }

                                },
                        {field:'publish',title:'出版社',templet:'<div>{{d.book.publish}}</div>',width: 140},
                        {field:'userId',title:'操作人',templet:function (d) {
                                if (d.userId==1){
                                    return"管理员";
                                }
                                if (d.userId==2){
                                    return "用户";
                                }
                                return "无";
                            },width: 80},
                        {field:'right', title: '操作', toolbar:"#barDemo",width: 70}

                    ]],id: 'testReload'
                    // done: function(res,curr){
                    //     //数据表格加载完成时调用此函数
                    //     //如果是异步请求数据方式，res即为你接口返回的信息。
                    //     //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    //
                    //     //设置全部数据到全局变量
                    //     table_data=res.data;
                    //
                    //     //在缓存中找到id ,然后设置data表格中的选中状态
                    //     //循环所有数据，找出对应关系，设置checkbox选中状态
                    //     for(var i=0;i< res.data.length;i++){
                    //         for (var j = 0; j < ids.length; j++) {
                    //             //数据id和要勾选的id相同时checkbox选中
                    //             if(res.data[i].id == ids[j])
                    //             {
                    //                 //这里才是真正的有效勾选
                    //                 res.data[i]["LAY_CHECKED"]='true';
                    //                 //找到对应数据改变勾选样式，呈现出选中效果
                    //                 var index= res.data[i]['LAY_TABLE_INDEX'];
                    //                 $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                    //                 $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                    //             }
                    //         }
                    //     }
                    //     //设置全选checkbox的选中状态，只有改变LAY_CHECKED的值， table.checkStatus才能抓取到选中的状态
                    //     var checkStatus = table.checkStatus('my-table');
                    //     if(checkStatus.isAll){
                    //         $(' .layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
                    //         $('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
                    //     }
                    //     //得到所有数据
                    //     console.log(res);
                    //     //得到当前页码
                    //     console.log(curr);
                    //     //得到数据总量
                    //     console.log(res.count);
                    // }
                });
                //全选功能
                form.on("checkbox(siam_all)", function () {
                    var status = $(this).prop("checked");
                    $.each($("input[name=siam_one]"), function (i, value) {
                        $(this).prop("checked", status);
                    });
                    form.render();
                });

                //续借功能
                table.on('tool(book-list)',function (obj) {
                    var data = obj.data;
                    if (obj.event == 'return'){
                        layer.confirm('确定续借这本书吗？', function(index){
                           window.location.href = "record.let?type=keep&id=" + data.id;
                            layer.close(index);
                        });
                    }
                });

            });

            $("#ReturnBtn").click(function () {

                // 获取选中数据
                var ids = [];
                $.each($("input[name=siam_one]:checked"), function (i, value) {
                    ids[i] = $(this).attr("data-id");

                });
                console.log(ids);
                var str =ids.join('_');
                location.href ="record.let?type=back&ids="+str+"&memId="+memId;
            });


        });

        //默认数据表格加载无数据
        table.render({
            elem:'#book-list',
            url:'record.let?type=query&memId=0',//数据接口
            title:'图书信息表',
            page:true,//开启分页
            method:'post',
            limit:5,
            limits:[3,5],
            request: {
                page: 1 //页码的参数名称，默认：page
                ,limit: 5//每页数据量的参数名，默认：limit
            } ,
            cols:[[//表头
                { checkbox: true, width: 60, fixed: true },
                {field:'id',title:'ID',sort:true,fixed:"left"},
                {field:'bookId',title:'书名',templet:'<div>{{d.book.bname}}</div>'},
                {field:'bookCase',title:'类别',templet:'<div>{{d.book.type.tname}}</div>'},
                {field:'author',title:'作者',templet:'<div>{{d.book.author}}</div>'},
                {field:'stock',title:'库存',templet:'<div>{{d.book.stock}}</div>'},
                {field:'price',title:'价格',templet:'<div>{{d.book.price}}</div>'},
                {field:'rentDate',title:'借阅时间',templet : "<div>{{layui.util.toDateString(d.rentDate, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
                {field:'backDate',title:'归还时间',templet : "<div>{{layui.util.toDateString(d.backDate, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
                {field:'publish',title:'出版社',templet:'<div>{{d.book.publish}}</div>'},
                {field:'userId',title:'操作人',templet:function (d) {
                        if (d.userId==1){
                            return"管理员";
                        }
                        if (d.userId==2){
                            return "用户";
                        }
                        return "无";
                    }},
                {field:'right', title: '操作', toolbar:"#barDemo"}
            ]]
        });




    });

    //将时间格式转换成字符串
    function Format(datetime,fmt) {
        if (parseInt(datetime)==datetime) {
            if (datetime.length==10) {
                datetime=parseInt(datetime)*1000;
            } else if(datetime.length==13) {
                datetime=parseInt(datetime);
            }
        }
        // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
        // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
        // 例子：
        //Format("2016-10-04 8:9:4.423","yyyy-MM-dd hh:mm:ss.S") ==> 2016-10-04 08:09:04.423
        // Format("1507353913000","yyyy-M-d h:m:s.S")      ==> 2017-10-7 13:25:13.0
        datetime=new Date(datetime);
        var o = {
            "M+" : datetime.getMonth()+1,                 //月份
            "d+" : datetime.getDate(),                    //日
            "h+" : datetime.getHours(),                   //小时
            "m+" : datetime.getMinutes(),                 //分
            "s+" : datetime.getSeconds(),                 //秒
            "q+" : Math.floor((datetime.getMonth()+3)/3), //季度
            "S"  : datetime.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt))
            fmt=fmt.replace(RegExp.$1, (datetime.getFullYear()+"").substr(4 - RegExp.$1.length));
        for(var k in o)
            if(new RegExp("("+ k +")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        return fmt;
    }


</script>
